<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <title>客户满意度调查</title>
    <link rel="stylesheet" href="/css/reset.css">
    <link rel="stylesheet" href="/css/message.css">
    <link rel="stylesheet" href="./css/index.css">

</head>

<body>
    <div class="container">
        <!-- 头部 -->
        <header class="header">
            <div class="back-btn">
                <img src="/images/back_icon.png" alt="返回">
            </div>
            <div class=" header-title">客户满意度调查
            </div>
        </header>

        <!-- 问卷内容 -->
        <div class="survey-content">
            <div class="survey-content-wrapper">
                <img src="./images/content_bg.png" alt="问卷背景">
            </div>
            <!-- 问候语 -->
            <div class="greeting">
                尊敬的客户：<br>
                您好！<br>
                为了不断改进我公司的产品结构和实物质量，提高服务水平，欢迎您参加钢材产品满意度调查。<br>
                此次调查仅作为公司内部使用，将对您的信息严格保密，请您放心作答。<br>
                现就下列内容提出您宝贵的意见建议，以便有效地改进我们的工作，谢谢您的支持与合作！
            </div>
            <div class="start-content">
                <div class="start-title">
                    <img src="./images/start_icon.png" alt="开始答题">
                    开始答题
                </div>

                <!-- 基本信息 -->
                <div class="basic-info">
                    <div class="form-item info-item">
                        <div class="form-label">客户代码</div>
                        <div class="form-text">LG057868</div>
                    </div>
                    <div class="form-item info-item">
                        <div class="form-label">客户名称</div>
                        <div class="form-text">陈欣凯</div>
                    </div>
                    <div class="form-item">
                        <div class="form-label">产品名称</div>
                        <select class="form-input">
                            <option value="">请选择</option>
                        </select>
                    </div>
                </div>

                <!-- 满意度调查 -->
                <div class="question-block">
                    <div class="question-title">产品质量</div>

                    <!-- 表面质量 -->
                    <div class="form-item">
                        <div class="form-label">表面质量与板型？</div>
                        <div class="radio-group">
                            <label class="radio-item">
                                <input type="radio" name="surface" value="5">
                                <span>非常满意</span>
                            </label>
                            <label class="radio-item">
                                <input type="radio" name="surface" value="4">
                                <span>满意</span>
                            </label>
                            <label class="radio-item">
                                <input type="radio" name="surface" value="3">
                                <span>一般</span>
                            </label>
                            <label class="radio-item">
                                <input type="radio" name="surface" value="2">
                                <span>不满意</span>
                            </label>
                            <label class="radio-item">
                                <input type="radio" name="surface" value="1">
                                <span>非常不满意</span>
                            </label>
                        </div>
                    </div>

                    <!-- 尺寸精度 -->
                    <div class="form-item">
                        <div class="form-label">尺寸精度与公差控制？</div>
                        <div class="radio-group">
                            <label class="radio-item">
                                <input type="radio" name="size" value="5">
                                <span>非常满意</span>
                            </label>
                            <label class="radio-item">
                                <input type="radio" name="size" value="4">
                                <span>满意</span>
                            </label>
                            <label class="radio-item">
                                <input type="radio" name="size" value="3">
                                <span>一般</span>
                            </label>
                            <label class="radio-item">
                                <input type="radio" name="size" value="2">
                                <span>不满意</span>
                            </label>
                            <label class="radio-item">
                                <input type="radio" name="size" value="1">
                                <span>非常不满意</span>
                            </label>
                        </div>
                    </div>
                </div>

                <!-- 服务质量 -->
                <div class="question-block">
                    <div class="question-title">服务质量</div>

                    <!-- 交货及时性 -->
                    <div class="form-item">
                        <div class="form-label required">您对哪些服务质量满意？（可多选）</div>
                        <div class="checkbox-group">
                            <label class="checkbox-item">
                                <input type="checkbox" name="service" value="delivery">
                                <span>交货及时性</span>
                            </label>
                            <label class="checkbox-item">
                                <input type="checkbox" name="service" value="attitude">
                                <span>服务态度</span>
                            </label>
                            <label class="checkbox-item">
                                <input type="checkbox" name="service" value="response">
                                <span>响应速度</span>
                            </label>
                            <label class="checkbox-item">
                                <input type="checkbox" name="service" value="professional">
                                <span>专业程度</span>
                            </label>
                            <label class="checkbox-item">
                                <input type="checkbox" name="service" value="communication">
                                <span>沟通效果</span>
                            </label>
                        </div>
                    </div>
                </div>

                <!-- 品牌形象 -->
                <div class="question-block">
                    <div class="question-title">品牌形象</div>

                    <!-- 人员服务 -->
                    <div class="form-item">
                        <div class="form-label">人员服务与素质？</div>
                        <div class="radio-group">
                            <label class="radio-item">
                                <input type="radio" name="service" value="5">
                                <span>非常满意</span>
                            </label>
                            <label class="radio-item">
                                <input type="radio" name="service" value="4">
                                <span>满意</span>
                            </label>
                            <label class="radio-item">
                                <input type="radio" name="service" value="3">
                                <span>一般</span>
                            </label>
                            <label class="radio-item">
                                <input type="radio" name="service" value="2">
                                <span>不满意</span>
                            </label>
                            <label class="radio-item">
                                <input type="radio" name="service" value="1">
                                <span>非常不满意</span>
                            </label>
                        </div>
                    </div>
                </div>

                <!-- 订货品种 -->
                <div class="form-item">
                    <div class="form-label">订货品种：</div>
                    <input type="text" class="form-input" placeholder="请输入订货品种">
                </div>

                <!-- 建议 -->
                <div class="form-item">
                    <div class="form-label">对本公司产品与服务质量改进有何建议？</div>
                    <textarea class="textarea" placeholder="请输入建议"></textarea>
                </div>

                <!-- 问题 -->
                <div class="form-item">
                    <div class="form-label">目前本公司存在的主要突出问题：</div>
                    <textarea class="textarea" placeholder="请输入问题"></textarea>
                </div>

                <!-- 提交按钮移到这里 -->
                <div class="submit-wrapper">
                    <button class="submit-btn">提交</button>
                </div>
            </div>
        </div>

        <!-- 在 container div 内部的最后添加 -->
        <div class="success-modal" style="display: none;">
            <div class="modal-content">
                <div class="close-btn">
                    <img src="./images/close_icon.png" alt="关闭">
                </div>
                <div class="success-icon">
                    <img src="./images/success_icon.png" alt="成功">
                </div>
                <div class="success-title">提交成功</div>
                <div class="success-message">
                    感谢您提出的宝贵建议，我司将根据<br>
                    您的建议逐步提升服务及产品质量，<br>
                    祝您生活愉快！
                </div>
                <button class="back-button">返回</button>
            </div>
        </div>
    </div>
</body>
<script src="/js/jquery.min.js"></script>
<script src="/js/mobile-adapter.js"></script>
<script src="/utils/url.js"></script>
<script src="/utils/message.js"></script>
<script src="/utils/request.js"></script>
<script src="./js/index.js"></script>

</html>